<template>
  <view>
    <cm-nav nav-align="start" back>
      <view class="bagua-nav-title-wrapper">
        <view class="bagua-nav-title">{{ currentTitle }}</view>
        <cm-icon size="16" type="cuIcon-triangledownfill"></cm-icon>        
      </view>
      <template v-slot:right>
        <cm-icon size="24" type="iconfont icon-save" @click="saveClickHandler"></cm-icon>
      </template>
    </cm-nav>
    
    <!-- 页面区域，下边距与tabBar高度相同 -->
    <view :style="[contentStyle]" :class="[contentClass]">
      <view v-if="isPageLoaded(0)" v-show="isPageShow(0)">
        <bagua-template :options="options[0]"></bagua-template>
      </view>
      <view v-if="isPageLoaded(1)" v-show="isPageShow(1)">
        <bagua-template :options="options[1]"></bagua-template>
      </view>
    </view>
    
    <!-- 保存模态框 -->
    <cm-modal ref="saveModal" height="170px" type="input" title="保存当前排盘"
      input-holder="请输入标题" :input-value="currentTitle"
      @confirm="saveBaguaHandler">
    </cm-modal>
  </view>
</template>

<script src="./bagua.js"></script>

<style lang="stylus">
@import './bagua.styl'
</style>
